<template>
   <view class="list-group"> 
		<view class="goods" @click="click">
			<view class="goods-title">订单号：{{data.ordersn}}</view>
			<view class="goods-status">
				<text style="background-color: #e2e1e9;" v-if="data.status == -1">已取消</text>
				<text style="background-color: #eab046;" v-if="data.status == 0">待付款</text>
				<text style="background-color: #c5000b;" v-if="data.status == 1">待发货</text>
				<text style="background-color: #001b4d;" v-if="data.status == 2">待收货</text>
				<text style="background-color: #32a97c;" v-if="data.status == 3">已完成</text>
			</view>
			<view class="goods-infos" v-for="(item1,i1) in data.goods" :key="i1">
				<block v-for='(item,i) in item1.goods' :key = 'i'>
					<view class="goods-infos-box">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="goods-infos-right">
							<view class="ellipsis-2">{{item.title}}</view>
							<view class="ellipsis-3">
								<text style="color:#7f7f80;">x{{item.total}}</text>
								<text style="color: #000;font-weight: bold;">￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="bottom">
				共{{data.goods_num}}件商品 实付: <text> {{data.price}}</text>
			</view>
			<view class="bottom-jf" v-if="Math.abs(data.tongduibao)!=0 || Math.abs(data.jindou)!=0">
				<text v-if="Math.abs(data.tongduibao)!=0"> +通兑宝抵扣: {{data.tongduibao}} </text>
				<text v-if="Math.abs(data.jindou)!=0"> +金豆抵扣: {{data.jindou}} </text>
			</view>
			<view class="bottom-button">
				<button type="default" v-if='data.status == -1 || data.status == 3' style="border-color: #c5000b;color:#c5000b;" plain="true" @click.stop="del">删除订单</button>
				<button type="primary" v-if='data.status == 0' style="border-color: #7f7f80;color:#ffffff;" @click.stop="cancel">取消订单</button>
				<button type="primary" style="border-color: #c5000b;background-color: #c5000b;color:#ffffff;" v-if='data.status == 0' @click.stop="pay">支付订单</button>
				<button type="primary" style="border-color: #7f7f80;color:#ffffff;" v-if='data.status == 3&&data.iscomment == 0' @click.stop="evaluate">评价</button>
				<button type="primary" style="border-color: #7f7f80;color:#ffffff;" v-if='data.status == 3 || data.status == 2' @click.stop="log">查看物流</button>
				<button type="primary" style="border-color: #7f7f80;color:#ffffff;" v-if='data.status == 2' @click.stop="confirm">确认收货</button>
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        props: {
            data: {
                type: Object,
                default: function(e) {
                    return {}
                }
            }
        },
		created(){
			console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&',this.data)
		},
        computed: {
            isImgRight() {
                return this.data.article_type === 2
            },
            isImgLeft() {
                return this.data.article_type === 1
            },
            showImg() {
                return this.data.image_list || this.data.image_url
            }
        },
        methods: {
            cancel(e) {
                this.$emit('cancel');
            },
            click(e) {
                this.$emit('click');
            },
            log(e) {
                this.$emit('log');
            },
            evaluate(e) {
                this.$emit('evaluate');
            },
            del(e) {
                this.$emit('del');
            },
            pay(e) {
                this.$emit('pay');
            },
			confirm(e){
				this.$emit('confirm')
			},
            bindClick() {
                this.$emit('click');
            }
        }
    }
</script>

<style lang="scss">
	.list-group{
		padding:0 30rpx 30rpx 30rpx;
	}
	.goods{
		background-color: #fff;
		border-radius: 20rpx;
		padding:30rpx;
		position: relative;
		.goods-title{
			font-size: 30rpx;
			color:#7f7f80;
			padding-bottom:20rpx;
		}
		.goods-status{
			position: absolute;
			top:0;
			right:0;
			text{
				display: inline-block;
				height: 50rpx;
				padding:0 30rpx;
				border-radius: 0 25rpx 0 25rpx;
				font-size:32rpx;
				color:#ffffff;
			}
		}
		.goods-info{
			padding:15rpx 0;
		}
		.goods-infos-box{
			display: flex;
			image{
				width: 260rpx;
				height: 260rpx;
				background-color: #04b815;
				border-radius: 10rpx;
			}
			.goods-infos-right{
				padding-left:30rpx;
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.ellipsis-2{
					font-size:30rpx;
					font-weight: 600;
				}
				.ellipsis-3{
					font-size:30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;  
				}
			}
		}
		.bottom{
			font-size: 28upx;
			text-align: right;
			padding: 10upx 0;
			color:#7f7f80;
			text{
				color:#d9433d;
				font-weight: 600;
			}
		}
		.bottom-jf{
			font-size: 28upx;
			text-align: right;
			padding: 10upx 0;
			color:#7f7f80;
		}
		.bottom-button{
			padding-top:30rpx;
			border-top-width:1px solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			button{
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				border-radius: 60rpx;
				border-width:1px;
				border-style:solid;
				margin:0;
				margin-left:20rpx;
				border:none;
			}
		}
	}

</style>
